<template>
  <el-container class="login-container">
    <!--左侧卡片-->
    <el-card class="auth-card left-card">
      <h2 class="platform-title">校园社交平台</h2>
      <div class="platform-desc">
        <p>2209</p>
        <span>林宇扬，林子敬，林铎洋，吴佳彪，陈泽武</span>
      </div>
    </el-card>
    <!--右侧卡片-->
    <el-card class="auth-card right-card">
      <div>
        <h2 class="author-title">注册</h2>
        <el-form :model="user" @submit.prevent="register" >
          <el-form-item >
            <el-input v-model="user.phone" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item >
            <el-input v-model="user.password" type="password" placeholder="请输入密码" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" native-type="submit">注册</el-button>
          </el-form-item>
          <el-form-item>
            <router-link to="/login">已有账号？去登录</router-link>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </el-container>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import api from '../../utils/index.js'; 

//用户信息
const user = ref({
  password: "",
  phone: "",
});
const router = useRouter();

// 定义注册方法
const register = async () => {
  // 验证表单数据
  if (!user.value.password || !user.value.phone) {
    ElMessage.error("请填写所有必填字段");
    return;
  }
  // 判断手机号
  const phoneRegex = /^1[3-9]\d{9}$/; 
  if (!phoneRegex.test(user.value.phone)) {
    ElMessage.error("请输入有效的手机号");
    return;
  }
  // 检查手机号是否已被注册
  const checkResponse = await api.get(`/users?phone=${user.value.phone}`);
  if (checkResponse.data.length > 0) {
    ElMessage.error("该手机号已被使用，请选择其他手机号");
    return;
  }
  // 发送注册请求
  try {
    const response = await api.post("/users", {
      password: user.value.password,
      phone: user.value.phone,
      username:'新用户'+user.value.phone
    });
    if (response.data) {
      ElMessage.success("注册成功");
      router.push("/login");
    } else {
      ElMessage.error("注册失败");
    }
  } catch (error) {
    ElMessage.error("注册请求出错，请稍后重试");
  }
};
</script>

<style scoped>
.login-container {
  padding: 0;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;
  background: linear-gradient(135deg, #409eff, #67c23a);
  overflow: hidden;
  height: 100vh;
}

.auth-card {
  margin: 0; 
  height: 400px;
  width: 400px;
  border-radius:0;
  /* 调整阴影，避免连接处阴影明显 */
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: none;
}
.left-card{
  background: linear-gradient(0deg, #3a485a 0%, #607089 100%), url("../../../public/assets/login.jpg") no-repeat right bottom;
  background-blend-mode: multiply; 
}
.right-card{
  background-color: white;
}
.platform-title {
  color: #fff;
  font-weight: 600;
  font-size: 24px; /* 调整标题字体大小 */
}
.platform-desc{
  color: #ffffff57;
}
.auth-title {
  text-align: center;
  margin-bottom: 20px;
  color: #24292e;
  font-weight: 600;
}

.el-form-item {
  margin-bottom: 16px;
}

.el-form-item__label {
  color: #24292e;
  font-weight: 500;
}

.el-input__inner,
.el-select__input {
  border-radius: 6px;
  border: 1px solid #d1d5da;
}

.el-input__inner:focus,
.el-select__input:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.el-button {
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  width: 300px;
}

.el-button.primary {
  background-color: #0969da;
  border-color: #0969da;
  color: white;
}

.el-button.primary:hover {
  background-color: #005cc5;
  border-color: #005cc5;
}

.el-button.info {
  background-color: #909399;
  border-color: #909399;
}

.el-button.info:hover {
  background-color: #a6a9ad;
  border-color: #a6a9ad;
}

.el-link {
  color: #0969da;
  text-decoration: none;
}

.el-link:hover {
  text-decoration: underline;
}

.terms-text {
  font-size: 12px;
  color: #57606a;
  text-align: center;
  margin-top: 10px;
}

.to:hover {
  color: #0969da;
}
</style>
